<!DOCTYPE html>
<html lang="en-US" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>我的帖子</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="郁郁苍苍,Share,分享,生活,快乐,让世间美好与你环环相扣">
    <meta name="time" content="写自于2020年一个雪虐风饕的晚上">
    <meta name="description" content="乐人之乐,人亦乐其乐;忧人之忧,人亦忧其忧。郁郁苍苍 一个可以分享心情,分享时光,分享生活点滴的社交平台">
    <link rel="icon" th:href="@{/favicon.ico}" type="image/x-icon"/>
    <link rel="bookmark" th:href="@{/favicon.ico}" type="image/x-icon"/>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/css/global.css}">
    <link rel="stylesheet" th:href="@{/layui/css/modules/layer/default/layer.css}">
</head>
<body>
<!--引入上边栏-->
<div th:replace="~{common/header::head}"></div>

<!--页面中间-->
<div class="layui-container fly-marginTop fly-user-main">
    <!--登录后的-用户左边栏-->
    <ul class="layui-nav layui-bg-cyan layui-nav-tree layui-inline" lay-filter="user">
        <li class="layui-nav-item">
            <a th:href="@{'/user/home/'+${session.loginUser.getUid()}}">
                <i class="layui-icon">&#xe609;</i>
                我的主页
            </a>
        </li>
        <li class="layui-nav-item">
            <a th:href="@{'/user/set/'+${session.loginUser.getUid()}}">
                <i class="layui-icon">&#xe620;</i>
                基本设置
            </a>
        </li>
        <li class="layui-nav-item layui-this">
            <a th:href="@{/user/index}">
                <i class="layui-icon">&#xe60a;</i>
                我的帖子
            </a>
        </li>

        <li class="layui-nav-item">
            <a th:href="@{/user/message}">
                <i class="layui-icon">&#xe611;</i>
                我的消息
            </a>
        </li>

        <li class="layui-nav-item">
            <a th:href="@{/user/relation}">
                <i class="layui-icon">&#xe770;</i>
                我的圈子
            </a>
        </li>
    </ul>

    <!--手机适配-->
    <div class="site-tree-mobile layui-hide">
        <i class="layui-icon"></i>
    </div>
    <div class="site-mobile-shade"></div>

    <div class="fly-panel fly-panel-user" pad20>
        <div class="layui-tab layui-tab-brief" lay-filter="user">
            <ul class="layui-tab-title" id="LAY_mine">
                <li data-type="mine-jie" lay-id="index" class="layui-this">
                    我发的帖（<span>[[${personalArticlesTotal}]]</span>）</li>
                <li data-type="mine-jie" lay-id="privacy">我的私密贴（<span>[[${privacyArticlesTotal}]]</span>）</li>
                <li data-type="collection" lay-id="collection">我的收藏帖（<span>[[${collectArticlesTotal}]]</span>）</li>
            </ul>
            <div class="layui-tab-content" style="padding: 20px 0;">
                <div class="layui-tab-item layui-show">
                    <ul class="mine-view jie-row" id="article_1">
                        <li th:each="personalArticle:${personalArticleList}">
                            <a th:href="@{'/blog/detail/'+${personalArticle.getAid()}}" th:utext="${personalArticle.getTitle()}"></a>
                            <!--  根据时间判断显示方式-->
                            <i>[[${#dates.format(personalArticle.getCreateTime(), 'yyyy-MM-dd HH:mm')}]]</i>
                            <em class="layui-hide-xs">[[${personalArticle.getBrowseNum()}]]阅/[[${personalArticle.getCommentNum()}]]答</em>
                        </li>
                        <div th:if="${#arrays.isEmpty(personalArticleList)}" class="fly-none"
                             style="min-height: 50px; padding:30px 0; height:auto;">
                            <i style="font-size:14px;">还没有发表任何帖子哦</i>
                        </div>
                    </ul>
                    <!--自己发的贴分页-->
                    <div style="text-align: center;" th:if="${personalArticlesTotal} > 10">
                        <!--分页-->
                        <div id="personalArticle"></div>
                    </div>
                </div>
                <!--     私密帖子-->
                <div class="layui-tab-item">
                    <ul class="mine-view jie-row" id="article_2">
                        <li th:each="privacyArticle:${privacyArticleList}">
                            <a th:href="@{'/blog/detail/'+${privacyArticle.getAid()}}" th:utext="${privacyArticle.getTitle()}"></a>
                            <!--  根据时间判断显示方式-->
                            <i>[[${#dates.format(privacyArticle.getCreateTime(), 'yyyy-MM-dd HH:mm')}]]</i>
                            <em class="layui-hide-xs">[[${privacyArticle.getBrowseNum()}]]阅/[[${privacyArticle.getCommentNum()}]]答</em>
                        </li>
                        <div th:if="${#arrays.isEmpty(privacyArticleList)}" class="fly-none"
                             style="min-height: 50px; padding:30px 0; height:auto;">
                            <i style="font-size:14px;">还没有发表任何私密帖子哦</i>
                        </div>
                    </ul>
                    <!--私密贴分页-->
                    <div style="text-align: center;" th:if="${privacyArticlesTotal} > 10">
                        <!--分页-->
                        <div id="privacyArticle"></div>
                    </div>
                </div>
                <!--        收藏帖子-->
                <div class="layui-tab-item">
                    <ul class="mine-view jie-row" id="article_3">
                        <li th:each="collectBlog:${collectBlogList}">
                            <a th:href="@{'/blog/detail/'+${collectBlog.getAid()}}"  th:utext="${collectBlog.getTitle()}"></a>
                            <!--  根据时间判断显示方式-->
                            <i>[[${#dates.format(collectBlog.getCreateTime(), 'yyyy-MM-dd HH:mm')}]]</i>
                            <em class="layui-hide-xs">[[${collectBlog.getBrowseNum()}]]阅/[[${collectBlog.getCommentNum()}]]答</em>
                        </li>
                        <div th:if="${#arrays.isEmpty(collectBlogList)}" class="fly-none"
                             style="min-height: 50px; padding:30px 0; height:auto;">
                            <i style="font-size:14px;">还没有收藏任何帖子哦</i>
                        </div>
                    </ul>
                    <!--收藏贴分页-->
                    <div style="text-align: center;" th:if="${collectArticlesTotal} > 10">
                        <!--分页-->
                        <div id="collectBlog"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--页面底部-->
<div th:replace="~{common/footer::foot}"></div>
<script th:inline="javascript">
    layui.use(['laypage', 'layer'], function () {
        var laypage = layui.laypage
            , layer = layui.layer;
        //自定义首页、尾页、上一页、下一页文本
        laypage.render({
            elem: 'personalArticle'
            , count: [[${personalArticlesTotal}]]
            , curr: 1
            , limit: 10
            , first: false
            , last: false
            ,theme: '#1E9FFF'
            , jump: function (obj, first) {
                if (!first) {
                    getArticleList(obj.elem, obj.curr,'article_1');
                }
            }
        });
        laypage.render({
            elem: 'privacyArticle'
            , count: [[${privacyArticlesTotal}]]
            , curr: 1
            , limit: 10
            , first: false
            , last: false
            ,theme: '#1E9FFF'
            , jump: function (obj, first) {
                if (!first) {
                    getArticleList(obj.elem, obj.curr,'article_2');
                }
            }
        });
        laypage.render({
            elem: 'collectBlog'
            , count: [[${collectArticlesTotal}]]
            , curr: 1
            , limit: 10
            , first: false
            , last: false
            ,theme: '#1E9FFF'
            , jump: function (obj, first) {
                if (!first) {
                    getArticleList(obj.elem, obj.curr,'article_3');
                }
            }
        });
    });
    function getArticleList(type, curr , id) {
        //获取页面
        $.post("/user/index/page", {"type": type, "currentPage": curr}, function (data) {
            var articleDtoList = data.articleDtoList;
            $("#"+id).empty();
            for (var i = 0; i < articleDtoList.length; i++) {
                var article = articleDtoList[i];
                var articleId = ''+article.aid;
                var createTime = article.createTime;
                var date = new Date(createTime);
                console.info(date);
                var title = article.title;
                $("#"+id).append("<li><a href='/blog/detail/"+articleId+"'>"+title+"</a><i>"+dateFormat("YYYY-mm-dd HH:MM", date)+"</i><em class='layui-hide-xs'>"+article.browseNum+"阅/"+article.commentNum+"答</em></li>");
            }
        })
    }
    //+dateFormat("YYYY-mm-dd HH:MM", date)
    function dateFormat(fmt, date) {
        let ret;
        const opt = {
            "Y+": date.getFullYear().toString(),        // 年
            "m+": (date.getMonth() + 1).toString(),     // 月
            "d+": date.getDate().toString(),            // 日
            "H+": date.getHours().toString(),           // 时
            "M+": date.getMinutes().toString(),         // 分
            "S+": date.getSeconds().toString()          // 秒
            // 有其他格式化字符需求可以继续添加，必须转化成字符串
        };
        for (let k in opt) {
            ret = new RegExp("(" + k + ")").exec(fmt);
            if (ret) {
                fmt = fmt.replace(ret[1], (ret[1].length === 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
            };
        };
        return fmt;
    }
</script>
</body>
</html>